<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { delStarsImage, StarsImage, StarsImages } from '@/utils/api.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import wlsCollect from "@/components/common/wls-collect.vue";
const route = useRoute();
const router = useRouter();
let areaId = '';
let mobile = '';
let sta = '';

const rblist = ref([]);
const coll = ref(null);
// const totalElements = ref(0);
// let pageNum = 1;
// const currentPage = ref(1);

const getStarsImages = async () => {
    let id = route.query.speciesid;
    let res = await StarsImages(id)
    if (res.code == '200') {
        rblist.value = res.data;
        // totalElements.value = res.data.totalElements;
    }
}

const collcr = (data) => {
    sta = data.id;
    if (data.starsStatus == 0) {
        coll.value.open()
    } else {
        let str = '是否取消收藏该文件. 继续?'
        ElMessageBox.confirm(
            str,
            '提示',
            {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning',
            }
        )
            .then(() => {
                let params = '?id=' + data.imageId + '&areaId=' + areaId + '&mobile=' + mobile;
                delStarsImage(params).then(res => {
                    if (res.code == '200') {
                        ElMessage({
                            type: 'success',
                            message: '取消收藏成功'
                        })
                        getStarsImages();
                    }
                })
            })
            .catch(() => {

            })
    }

}

const iscollect = (data) => {
    let params = {
        "folderId": data,
        "imageId": sta
    }
    StarsImage(params).then(res => {
        if (res.code == '200') {
            getidentifyResultInfo();
            coll.value.close()
        }
    })
}


const handleSizeChange = (val) => {
    pageNum = val;
    getStarsImages();
};

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    mobile = window.sessionStorage.getItem('mobile');
    getStarsImages();
})

</script>
<template>
    <div class="wls-aut">
        <div class="wls-details-title">
            <!-- 标题 B-->
            <div class="wls-details-title">
                <div class="wls-details-title-txt">
                    <span>收藏夹</span>
                    <span class="icon iconfont icon-xiala"></span>
                    <span>{{ route.query.name }}</span>
                    <!-- <span style="color: #333;margin-left: .24rem;">总计</span>
                    <div style="color: var(--wls-color);margin-left: 0.08rem;">23339845566张</div> -->
                </div>
            </div>
            <el-button @click.stop="router.go(-1)">返回</el-button>
            <!-- 标题 E-->
        </div>

        <div class="wls-details-container">

            <div class="bcb">
                <ul class="wls-empty">
                    <li class="bcb" v-for="(i, index) in rblist" :key="i.id">
                        <div class="wls-empty-img">
                            <div class="wdcrc-time">
                                <span>{{ i.shootingTime }}</span>
                            </div>
                            <div class="wls-empty-img-c wls-empty-img-collect" @click.stop="collcr(i)"
                                style="right: 0.08rem;">
                                <i class="icon iconfont icon-shoucang"
                                    :style="i.starsStatus == 0 ? '' : 'color:#FCD60F'"></i>
                            </div>
                            <video v-if="$wlsf.filiv(i.accessorySrc) == 4" :src="i.accessorySrc" controls alt=""></video>
                            <el-image v-else style="width: 100%; height:100%" :src="i.accessorySrc" :zoom-rate="1.2"
                                :max-scale="7" :min-scale="0.2" :preview-src-list="[i.accessorySrc]" fit="cover" />
                        </div>
                        <div class="wls-rd">
                            <div style="margin-bottom: .1rem;">
                                <span class="gradient-text">{{ (i.speciesName == null || i.speciesName == '') ? '--' :
                                    i.speciesName }}</span>
                            </div>
                            <div>
                                <span style="color: #AAA;" class="italic-text">{{ (i.latinName == null || i.latinName ==
                                    '') ? '--' :
                                    i.latinName }}</span>
                            </div>
                        </div>
                    </li>
                </ul>

                <!-- <el-pagination v-model:current-page="currentPage" :page-size="6" :small="true" :disabled="false" background
                    layout="total, prev, pager, next, jumper" :total="totalElements" @size-change="handleSizeChange" /> -->
            </div>
        </div>
        <wls-collect ref="coll" @submitfl="iscollect" />
    </div>
</template>
<style scoped>
.wls-details-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .1rem 0 .1rem;
    margin-bottom: 0.06rem;
}

.wls-details-title-txt {
    display: flex;
    align-items: center;
    color: #AAA;
}


.wls-details-title-txt>span:nth-child(2) {
    transform: rotate(-90deg);
    margin: 0 0.08rem;
}

.wls-details-title-txt>span:nth-child(3) {
    color: #333;
    font-weight: 700;
}

.wls-details-container {
    width: 100%;
    height: calc(100% - .5rem);
    padding: 0.1rem;
    display: flex;
}

.wls-details-container>div {
    width: 100%;
    height: 100%;
    padding: 0.24rem;
}

.wls-empty {
    width: 100%;
    padding: 3px;
    overflow: hidden;
}

.wls-empty>li {
    width: calc((100% - 0.8rem) / 6);
    height: 2.7rem;
    float: left;
    margin: 0 0.16rem 0.16rem 0;
}

.wls-empty>li:nth-child(6n) {
    margin-right: 0;
}

.wls-empty-img {
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    position: relative;
}

.wls-empty-img img {
    width: 100%;
    height: 100%;
}

.wls-empty-img video {
    max-width: 100%;
    max-height: 100%;
}

.wls-empty-img-collect {
    width: 0.4rem;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
}

.wls-empty-img-c {
    color: #FFDA1A;
    position: absolute;
    top: 0.08rem;
    z-index: 4;
}

.wls-rd {
    width: 100%;
    height: 0.7rem;
    padding: 0 0.16rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wdcrc-time {
    width: 1.7rem;
    height: 0.26rem;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0.08rem;
    bottom: 0.08rem;
    z-index: 2;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.70);
    overflow: hidden;
}
</style>